<template>
  <div class="recInfo">
    <div class="top" v-if="playList">
      <img :src="playList.coverImgUrl" class="bg" />
      <div class="wrap">
        <div class="left">
          <img :src="playList.coverImgUrl" />
          <span class="playCount">{{ playList.playCount | formatNum }}</span>
          <div class="icon">歌单</div>
        </div>
        <div class="right">
          <div class="title">{{ playList.name }}</div>
          <div class="user">
            <img :src="playList.creator.avatarUrl" />
            <span>{{ playList.creator.nickname }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" v-if="playList">
      <div class="songList">
        <p class="title">歌曲列表</p>
        <SongList
          :songs="showList"
          :showNum="true"
          @play="$emit('play', $event)"
        ></SongList>
        <p class="hint">下载客户端，查看更多内容</p>
      </div>
      <div class="hotComments" v-if="hotComments && hotComments.length">
        <p class="title">精彩评论({{ hotComments.length }})</p>
        <CommentItem
          v-for="item in hotComments"
          :key="item.commentId"
          :comment="item"
        ></CommentItem>
      </div>
      <div class="newComments" v-if="newComments && newComments.length">
        <p class="title">最新评论({{ newComments.length }})</p>
        <CommentItem
          v-for="item in newComments"
          :key="item.commentId"
          :comment="item"
        ></CommentItem>
      </div>
    </div>
    <Loading v-if="songLoading || commentLoading"></Loading>
  </div>
</template>

<script>
import SongList from "@/components/SongList";
import Loading from "@/components/Loading";
import CommentItem from "@/components/CommentItem";
export default {
  data() {
    return {
      playList: null,
      showList: null,
      songLoading: false,
      commentLoading: false,
      newComments: null,
      hotComments: null,
    };
  },
  components: {
    SongList,
    Loading,
    CommentItem,
  },
  created() {
    let id = this.$route.query.id;
    if (!id) return;
    this.songLoading = true;
    this.$http
      .get("/playlist/detail", {
        params: {
          id,
        },
      })
      .then((d) => {
        this.songLoading = false;
        // console.log(d);
        this.playList = d.data.playlist;
        this.showList = d.data.playlist.tracks.map((item, index) => {
          item.song = {
            artists: item.ar,
            privilege: {
              playMaxbr: d.data.privileges[index].playMaxbr,
            },
            album: item.al,
            alias: item.alia,
          };
          return item;
        });
      });
    this.commentLoading = true;
    this.$http
      .get("/comment/playlist", {
        params: {
          id,
        },
      })
      .then((d) => {
        this.commentLoading = false;
        // console.log(d);
        this.hotComments = d.data.hotComments;
        this.newComments = d.data.comments;
      });
  },
  filters: {
    formatNum(value) {
      return value > 100000000
        ? (value / 100000000).toFixed(0) + "亿"
        : value > 10000
        ? (value / 10000).toFixed(1).replace(/\.0$/, "") + "万"
        : value;
    },
  },
};
</script>

<style lang="less" scoped>
.recInfo {
  .top {
    padding: 30px 10px 25px 15px;
    overflow: hidden;
    position: relative;
    &::after {
      content: "";
      width: 100%;
      height: 5px;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      background: linear-gradient(#fff, rgba(0, 0, 0, 0));
    }
    .bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      filter: blur(20vw);
      background: #fff;
    }
    .wrap {
      display: flex;
      position: relative;
      z-index: 2;
      .left {
        width: 33vw;
        max-width: 200px;
        height: 33vw;
        max-height: 200px;
        overflow: hidden;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 18px;
          z-index: 2;
          background-image: -webkit-linear-gradient(
            left,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.2)
          );
        }
        img {
          width: 100%;
        }
        .icon {
          position: absolute;
          z-index: 3;
          top: 10px;
          left: 0;
          padding: 0 8px;
          height: 17px;
          line-height: 17px;
          color: #fff;
          font-size: 9px;
          text-align: center;
          background-color: rgba(93, 202, 168, 0.8);
          border-radius: 0 17px 17px 0;
        }
        .playCount {
          position: absolute;
          right: 2px;
          top: 0;
          z-index: 3;
          padding-left: 15px;
          color: #fff;
          font-size: 12px;
          text-shadow: 1px 0 0 rgb(0, 0, 0, 0.15);
          background-image: url();
          background-position: 0;
          background-repeat: no-repeat;
          background-size: 11px 10px;
        }
      }
      .right {
        width: 0;
        flex: 1;
        margin-left: 16px;
        .title {
          padding-top: 1px;
          font-size: 17px;
          line-height: 1.3;
          color: #fefefe;
          height: 44px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .user {
          display: flex;
          align-items: center;
          position: relative;
          margin-top: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          span {
            color: rgba(255, 255, 255, 0.7);
            margin-left: 5px;
          }
        }
      }
    }
  }
  .bottom {
    .title {
      height: 22px;
      line-height: 22px;
      padding: 0 10px;
      font-size: 12px;
      color: #666;
      background-color: #eeeff0;
    }
    .songList > :not(.title) {
      padding-right: 5px;
    }
    .hotComments,
    .newComments {
      & > :not(.title) {
        padding: 0 5px;
      }
    }
    .hint {
      height: 55px;
      line-height: 55px;
      text-align: center;
      color: #999;
    }
  }
}
</style>